<template>
  <section
    class="info-item"
    :style="{
      'border-right': index === 0 || index === 1 ? '1px solid #f9f9f9' : '',
    }"
  >
    <div class="top">
      <span class="count" :style="{ color: indColor }"> {{ count }}</span>
      <span> {{ item.decorate }}</span>
    </div>
    <div class="bottom">
      {{ item.text }}
    </div>
  </section>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    index: {
      type: Number,
      default() {
        return 0;
      },
    },
  },
  computed: {
    indColor() {
      let color = "";
      switch (this.index) {
        case 0:
          color = "#ff9900";
          break;
        case 1:
          color = "#ff5f3e";
          break;
        default:
          color = "#6ac20b";
          break;
      }
      return color;
    },
    count() {
      return this.index === 0 ? this.item.count.toFixed(2) : this.item.count;
    },
  },
};
</script>
<style lang="less" scoped>
.info-item {
  width: 33%;
  padding: 15px 0;
  font-size: 13px;
  color: #333333;
  .top {
    margin-bottom: 10px;
    .count {
      font-weight: 900;
      font-size: 25px;
    }
  }
}
</style>